<template>
  <div class="goods_wrap">
    <div class="goods_top">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="goods_search">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input placeholder="请输入内容" v-model="goodsObj.params.query">
            <template #append>
              <el-button type="primary" @click="getGoodsData">搜索</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toAdd">添加商品</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="goods_table">
      <el-table
        :data="goodsObj.goodsList"
        border
        style="width: 100%"
        max-height="450"
      >
        <el-table-column type="index" width="50" align="center" />
        <el-table-column
          prop="goods_name"
          label="商品名称"
          width="700"
          align="center"
        />
        <el-table-column prop="goods_price" label="商品价格" align="center" />
        <el-table-column prop="add_time" label="创建日期" align="center">
          <template #default="scope">
            {{ dayFn(scope.row.add_time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="showEditDialog(scope.row.goods_id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="deleteGoodsFn(scope.row.goods_id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 编辑弹框的回显 -->
    <el-dialog v-model="goodsObj.editDialog" title="编辑商品" width="40%">
      <el-form
        ref="ruleForm"
        :model="goodsObj.editForm"
        status-icon
        :rules="goodsObj.editRules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品名称" prop="goods_name">
          <el-input v-model="goodsObj.editForm.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="goods_price">
          <el-input v-model="goodsObj.editForm.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="goods_number">
          <el-input v-model="goodsObj.editForm.goods_number"></el-input>
        </el-form-item>
        <el-form-item label="商品重量" prop="goods_weight">
          <el-input v-model="goodsObj.editForm.goods_weight"></el-input>
        </el-form-item>
        <el-form-item label="商品参数" prop="goods_cat">
          <el-input v-model="goodsObj.editForm.goods_cat"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="goodsObj.editDialog = false">取消</el-button>
          <el-button type="primary" @click="upEditGoodsFn">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <div class="goods_page">
      <el-pagination
        v-model:currentPage="goodsObj.params.pagenum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="goodsObj.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, ToRefs } from "vue";
import { useRouter } from "vue-router";
import {
  getGoods,
  deleteGoods,
  upEditGoods,
  getGoodsById,
} from "../../http/api";

import * as dayjs from "dayjs";
import * as isLeapYear from "dayjs/plugin/isLeapYear"; // import plugin
import "dayjs/locale/zh-cn"; // import locale
export default {
  setup() {
    //   路由实例对象
    const router = useRouter();
    // 商品信息
    const goodsObj = reactive({
      params: {
        pagenum: 1,
        pagesize: 10,
        query: "",
      },
      total: 0,
      goodsList: [],
      editDialog: false,
      editForm: {
        goods_name: "",
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        goods_cat: "",
        id: "",
      },
      editRules: {
        goods_name: [
            {
            required: true,
            message: '请输入商品名称',
            trigger: 'blur',
          },
        ],
        goods_price: [
            {
            required: true,
            message: '请输入商品价格',
            trigger: 'blur',
          },
        ],
        goods_number: [
            {
            required: true,
            message: '请输入商品数量',
            trigger: 'blur',
          },
        ],
        goods_weight: [
            {
            required: true,
            message: '请输入商品重量',
            trigger: 'blur',
          },
        ],
        goods_cat: [
            {
            required: true,
            message: '请输入商品参数',
            trigger: 'blur',
          },
        ],
        id: "",
      },
    });
    // 时间格式转换
    const dayFn = (value) => {
      return dayjs(Number(value)).format("YYYY-MM-DD");
    };
    // 跳转到add页面
    let toAdd = () => {
      router.replace({
        name: "add",
      });
    };
    // 获取商品信息
    let getGoodsData = async () => {
      let result = await getGoods(goodsObj.params);
      goodsObj.total = result.total;
      goodsObj.goodsList = result.goods;
    };
    // 初始化商品信息
    onMounted(async () => {
      getGoodsData();
    });
    //页码改变事件
    const handleCurrentChange = (value) => {
      goodsObj.params.pagenum = value;
      getGoodsData();
    };
    // 每页数量改变事件
    const handleSizeChange = (value) => {
      goodsObj.params.pagesize = value;
      getGoodsData();
    };
    // 删除商品
    const deleteGoodsFn = async (id) => {
      await deleteGoods(id);
      getGoodsData();
    };
    // 编辑弹框回显信息
    const showEditDialog = async (id) => {
      console.log(id);
      let result = await getGoodsById(id);
      console.log(result);
      const {goods_name,goods_price,goods_number,goods_weight,goods_cat} = result
      goodsObj.editForm={goods_name,goods_price,goods_number,goods_weight,goods_cat,id}
      goodsObj.editDialog = true;
    };
    // 点击确定提交商品
    const  upEditGoodsFn= async()=>{
        await upEditGoods(goodsObj.editForm)
        getGoodsData();
        goodsObj.editDialog = false;
    }
    return {
      goodsObj,
      toAdd,
      dayFn,
      handleCurrentChange,
      handleSizeChange,
      getGoodsData,
      deleteGoodsFn,
      showEditDialog,
      upEditGoodsFn
    };
  },
};
</script>

<style lang="scss" scoped>
.goods_wrap {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 15px;
  box-sizing: border-box;
  .goods_top {
    margin-bottom: 15px;
  }
  .goods_page {
    margin-top: 10px;
  }
}
</style>